<template>
  <div id="PostTip">
    <a-tab-pane class="customTabPane" title="帖子说明">
      <a-card v-if="notice" :title="notice.title" class="centerCard">
        <MdView :value="notice.content || ''" class="customContent" />
      </a-card>
    </a-tab-pane>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import MdView from "@/components/MdView.vue";
import { NoticeVO } from "@/views/Home/NoticeVO";

const notice = ref<NoticeVO>();
// 直接给notice赋值
notice.value = {
  title: "帖子说明",
  content:
    "### 一、帖子说明\n" +
    "\n" +
    "#### 1、帖子列表\n" +
    "\n" +
    "帖子列表采用Arco Design列表进行展示，展示出的内容较为详细，包括用户头像，标签，封面，简略信息等\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%B8%96%E5%AD%90%E5%88%97%E8%A1%A8.png)\n" +
    "\n" +
    "#### 2、帖子详细\n" +
    "\n" +
    "点击查看按钮，即可进入到帖子详细页面，同样类似于题目详细界面，均采用Markdown布局进行展示，使界面更加清爽，整洁；\n" +
    "\n" +
    "同样实现的还有右侧的评论区功能，包括展示用户头像，评论内容等\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%B8%96%E5%AD%90%E8%AF%A6%E7%BB%86.png)\n" +
    "\n" +
    "### 二、帖子操作\n" +
    "\n" +
    "#### 1、新增帖子\n" +
    "\n" +
    "用户可以新增帖子，来分享知识与心得\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E6%96%B0%E5%A2%9E%E5%B8%96%E5%AD%90.png)\n" +
    "\n" +
    "**注意**：帖子的验证（审核）阶段放在了后端进行实现，包括限制字数等，如下代码，这里只是初步做了字数的限制，后续需要进行完善\n" +
    "\n" +
    "```java\n" +
    "@Override\n" +
    "public void validPost(Post post, boolean add) {\n" +
    "    if (post == null) {\n" +
    "        throw new BusinessException(ErrorCode.PARAMS_ERROR);\n" +
    "    }\n" +
    "    String title = post.getTitle();\n" +
    "    String content = post.getContent();\n" +
    "    String tags = post.getTags();\n" +
    "    // 创建时，参数不能为空\n" +
    "    if (add) {\n" +
    "        ThrowUtils.throwIf(StringUtils.isAnyBlank(title, content, tags), ErrorCode.PARAMS_ERROR);\n" +
    "    }\n" +
    "    // 有参数则校验\n" +
    "    if (StringUtils.isNotBlank(title) && title.length() > 80) {\n" +
    '        throw new BusinessException(ErrorCode.PARAMS_ERROR, "标题过长");\n' +
    "    }\n" +
    "    if (StringUtils.isNotBlank(content) && content.length() > 8192) {\n" +
    '        throw new BusinessException(ErrorCode.PARAMS_ERROR, "内容过长");\n' +
    "    }\n" +
    "}\n" +
    "```\n" +
    "\n" +
    "#### 2、编辑与删除帖子\n" +
    "\n" +
    "##### （1）编辑\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%B8%96%E5%AD%90%E7%BC%96%E8%BE%91.png)\n" +
    "\n" +
    "**注意**：新增和编辑采用同一界面进行展示，通过前端路由判断进行区分\n" +
    "\n" +
    "代码示例：\n" +
    "\n" +
    "```javascript\n" +
    "const doSubmit = async () => {\n" +
    "  // 区分更新还是创建\n" +
    "  if (updatePage) {\n" +
    "    const res = await PostControllerService.editPostUsingPost(form.value);\n" +
    "    if (res.code === 0) {\n" +
    '      message.success("更新成功");\n' +
    '      await router.push("/post");\n' +
    "    } else {\n" +
    '      message.error("更新失败，" + res.message);\n' +
    "    }\n" +
    "  } else {\n" +
    "    console.log(form.value);\n" +
    "    const res = await PostControllerService.addPostUsingPost(form.value);\n" +
    "    if (res.code === 0) {\n" +
    '      message.success("创建成功");\n' +
    '      await router.push("/post");\n' +
    "      router.go(-1);\n" +
    "    } else {\n" +
    '      message.error("创建失败:" + res.message);\n' +
    "    }\n" +
    "  }\n" +
    "};\n" +
    "```\n" +
    "\n" +
    "##### （2）删除\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%B8%96%E5%AD%90%E6%9F%A5%E8%AF%A2.png)\n" +
    "\n" +
    "##### （3）权限校验\n" +
    "\n" +
    "编辑和删除帖子的一大重点就是**权限的校验**，在这里我做了强身份校验，只有自己或管理员才可以编辑或删除帖子\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%B8%96%E5%AD%90%E6%9D%83%E9%99%90%E6%A0%A1%E9%AA%8C.png)\n" +
    "\n" +
    "**部分代码示例**：\n" +
    "\n" +
    "```java\n" +
    '@PostMapping("/edit")\n' +
    "public BaseResponse<Boolean> editPost(@RequestBody PostEditRequest postEditRequest, HttpServletRequest request) {\n" +
    "    if (postEditRequest == null || postEditRequest.getId() <= 0) {\n" +
    "        throw new BusinessException(ErrorCode.PARAMS_ERROR);\n" +
    "    }\n" +
    "    Post post = new Post();\n" +
    "    BeanUtils.copyProperties(postEditRequest, post);\n" +
    "    List<String> tags = postEditRequest.getTagList();\n" +
    "    if (tags != null) {\n" +
    "        post.setTags(GSON.toJson(tags));\n" +
    "    }\n" +
    "    // 参数校验\n" +
    "    postService.validPost(post, false);\n" +
    "    User loginUser = userService.getLoginUser(request);\n" +
    "    long id = postEditRequest.getId();\n" +
    "    // 判断是否存在\n" +
    "    Post oldPost = postService.getById(id);\n" +
    "    ThrowUtils.throwIf(oldPost == null, ErrorCode.NOT_FOUND_ERROR);\n" +
    "    // 仅本人或管理员可编辑\n" +
    "    if (!oldPost.getUserId().equals(loginUser.getId()) && !userService.isAdmin(loginUser)) {\n" +
    "        throw new BusinessException(ErrorCode.NO_AUTH_ERROR);\n" +
    "    }\n" +
    "    boolean result = postService.updateById(post);\n" +
    "    return ResultUtils.success(result);\n" +
    "}\n" +
    "```\n" +
    "\n" +
    "#### 3、帖子标签查询\n" +
    "\n" +
    "可以根据标签快速定位想要访问的梯子（查询功能放在了标题栏中，此处仅介绍特殊查询）\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E6%A0%87%E7%AD%BE%E6%90%9C%E7%B4%A2.png)",
};
</script>

<style>
#PostTip {
  max-width: 100%;
  margin: 0 auto;
}
.centerCard {
  font-size: 18px; /* 调整内容文字大小为16px */
}
.customContent {
  font-size: 20px; /* 调整内容文字大小为16px */
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
